<template>
  <div class="channel-edit">
    <van-cell :border="false">
      <div
        slot="title"
        class="title-text"
      >我的频道</div>
      <van-button
        class="edit-btn"
        size="mini"
        round
        type="danger"
        plain
        @click="isEdit= !isEdit"
      >{{isEdit?'完成':'编辑'}}</van-button>
    </van-cell>
    <van-grid
      :gutter="10"
      class='my-grid'
    >
      <van-grid-item
        class="grid-item"
        v-for="(obj,i) in channel"
        :key="i"
        icon="clear"
        @click="onMyChannelClick(obj, i)"
      >
      <!-- fiexdChannels.includes(obj.id)查找固定频道 -->
        <van-icon
          v-show="isEdit && !fiexdChannels.includes(obj.id)"
          slot="icon"
          name="clear"
        ></van-icon>
        <!-- :class语法
      一个对象。对象中的key表示要作用的css类名
               对象中的value要计算出布尔值
               true。则作用该类名
               false。不作用类名 -->
        <span
          class="text"
          :class="{active:  i === active}"
          slot="text"
        >
          {{ obj.name }}
        </span>
      </van-grid-item>
    </van-grid>
    <!-- 频道推荐 -->
    <van-cell :border="false">
      <div
        slot="title"
        class="title-text"
      >频道推荐</div>
    </van-cell>
    <van-grid
      :gutter="10"
      class='recommend-grid'
    >
      <van-grid-item
        class="grid-item"
        v-for="(obj ,i) in recommendChannels"
        :key="i"
        :text="obj.name"
        icon="plus"
        @click="onAddChannel(obj)"
      />
    </van-grid>
  </div>
</template>

<script>
// 调用发送请求的模板
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/article'
// 加载公共资源的组件
import { mapState } from 'vuex'
// 加载本地储存的组件
import { setItem } from '@/utils/storage.js'
export default {
  // 组件名称
  name: 'channelEdit',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    // 接收父组件传递过来的我的频道数据，接收来进行渲染
    channel: {
      type: Array,
      redirect: true
    },
    // 此处接收的是实现本页面我的频道高亮和父组件里面的高亮效果相对应的效果
    // 设置样式为数字形式，必须传值
    active: {
      type: Number,
      redirect: true

    }
  },
  // 组件状态值
  data () {
    return {
      allChannels: [], // 全部频道保存到这里
      isEdit: false, // 控制编辑状态的显示
      fiexdChannels: [0] // 固定频道的id，不允许删除
    }
  },
  // 计算属性
  computed: {
    // 方法二
    recommendChannels () {
      // 数组的filter方法：遍历数组，把符合条件发元素储存到一个新的数组
      // 获取推荐频道，遍历所有频道这个数组obj是数组的每一项
      // 这里return出去的就是我们想要的频道推荐的数据
      return this.allChannels.filter(obj => {
        // 遍历我的频道这个数组，channels表示这个数组的每一项
        // !这里是取反，不要相同的，那么在返回出去的就是所有频道-我的频道=频道推荐
        // 数组的find方法：遍历数组。把符合条件的第一个元素返回
        return !this.channel.find(channels => {
          // 获取我的频道里面的每一项的id与所有频道里面的id进行对比
          // 如果相同则把他return出去true
          return channels.id === obj.id
        })
      })
    },
    // 方法一
    // recommendChannels () {
    //   const channels = []
    //   this.allChannels.forEach(channel => {
    //     // find 遍历数组，找到满足条件的元素项，如果没找到则返回undefined
    //     const ret = this.myChannels.find(myChannel => {
    //       return myChannel.id === channel.id
    //     })
    //     // 如果我的频道中不包括该频道项，则收集到推荐频道中
    //     if (!ret) {
    //       channels.push(channel)
    //     }
    //   })
    //   // 把计算结果返回
    //   return channels
    // },
    ...mapState(['user'])
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
* 组件实例创建完成,属性已绑定,但DOM还未生成,el属性还不存在
*/
  created () {
    this.loadAllChannels()
  },
  /**
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
*/
  mounted () { },
  // 组件方法
  methods: {
    async loadAllChannels () {
      try {
        const { data } = await getAllChannels()
        console.log(data)
        this.allChannels = data.data.channels
      } catch {
        this.$toast('获取推荐列表失败')
      }
    },
    // 点击频道推荐的按钮，让他增加到我的频道
    onAddChannel (obj) {
      this.channel.push(obj)
      // 登录状态下
      // 根据user判读是否登录
      if (this.user) {
        try {
          addUserChannel({
            id: obj.id,
            seq: this.channel.length // 频道的 序号
          })
        } catch (err) {
          this.$toast('获取我的频道失败')
        }
      } else {
        // 未登录状态下，把我的频道保存到本地存储
        setItem(setItem('TOUTIAO_CHANNELS', this.channels))
      }
    },
    // 点击我的频道的按钮触发
    onMyChannelClick (obj, i) {
      // 叉号按钮显示，把我的频道里面的按钮删除增加到推荐频道
      if (this.isEdit) {
        // 判断指定数组里面是否有指定的索引，如果有则证明不能删除这个按钮，我们就把这个事件结束
        if (this.fiexdChannels.includes(obj.id)) {
          return
        }
        if (i < this.active) {
          // 调用父组件自定义的方法，并且传递两个值，
          // 第一个值active表示页面显示那个下标的内容，在此处减一在传递，解决删除高亮前面的
          // 按钮而下标不发生改变，导致不在显示指定页面的的内容
          // 第二个值，表示弹出框是否显示
          this.$emit('update-active', this.active - 1, true)
        }
        this.channel.splice(i, 1)
      } else {
        // 插好按钮不显示，点击我的按钮实现页面跳转，主页面渲染你点击按钮对应的页面
        // 调用父组件上的自定义的方法，并且传递值，给他指定发下标，让主页面显示指定的
        this.$emit('update-active', i, false)
      }
      if (this.user) {
        try {
          deleteUserChannel(obj.id)
        } catch (err) {
          this.$toast('获取我的频道失败')
        }
      } else {
        // 未登录状态下，把我的频道保存到本地存储
        setItem(setItem('TOUTIAO_CHANNELS', this.channel))
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  padding: 85px 0;
  .title-text {
    font-size: 32px;
    color: #333333;
  }

  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  /deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      white-space: nowrap;
      background-color: #f4f5f6;
      .van-grid-item__text,
      .text {
        font-size: 28px;
        color: #222;
        margin-top: 0;
      }
      .active {
        color: red;
      }
    }
  }

  /deep/ .recommend-grid {
    .grid-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
          margin-right: 6px;
        }
        .van-grid-item__text {
          margin-top: 0;
        }
      }
    }
  }
  /deep/ .my-grid {
    .grid-item {
      .van-icon-clear {
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 30px;
        color: #cacaca;
        z-index: 2;
      }
    }
    .van-grid-item__icon-wrapper {
      //清除浮动
      position: unset;
    }
  }
}
</style>
